<template>
  <div class="page adaofu-onsale">
    <div class="container">
      <div class="selected-section" :style="bg1">
        <div class="selected-list">
          <div>
            <template v-if="chosenItem[0]">
              <img :src="chosenItem[0].image" mode="aspectFit"/>
              <i class="delete" :style="deleteIcon" @click="onDeleteClick(chosenItem[0])"></i>
            </template>
          </div>
          <div>
            <template v-if="chosenItem[1]">
              <img :src="chosenItem[1].image" mode="aspectFit"/>
              <i class="delete" :style="deleteIcon" @click="onDeleteClick(chosenItem[1])"></i>
            </template>
          </div>
          <div>
            <template v-if="chosenItem[2]">
              <img :src="chosenItem[2].image" mode="aspectFit"/>
              <i class="delete" :style="deleteIcon" @click="onDeleteClick(chosenItem[2])"></i>
            </template>
          </div>
          <div v-if="storeInfo.items === '4'">
            <template v-if="chosenItem[3]">
              <img :src="chosenItem[3].image" mode="aspectFit"/>
              <i class="delete" :style="deleteIcon" @click="onDeleteClick(chosenItem[3])"></i>
            </template>
          </div>
          <div class="invite" v-else>
            <button open-type="share">邀请好友解锁货架位</button>
          </div>
        </div>
        <div class="btn" @click="onSetStoreItemClick">确认上架</div>
      </div>
      <div class="list-section">
        <div class="menu">
          <div class="menu-list"
            v-for="(item, i) in cateList" :key="i"
            :class="{ active: i === currentCate }"
            @click="onMenuClick(i)">
            <div class="menu-inner">{{item.name}}</div>
          </div>
        </div>
        <div class="detail" :style="bg2">
          <div class="detail-inner">
            <sale-list
              v-for="(item, i) in currentStoreItemList"
              :key="i"
              :item="item"
              :canChoose="canChoose"
              :chosenItemId="chosenItemId"
              @onClick="onChooseBtnClick">
            </sale-list>
          </div>
          <div class="tips">
            <p>Tips：</p>
            <p>不同产品的售价不一样，店主们可以尝试不同上架组合，寻找最佳搭配哦。商品上架三小时内就会被一抢而空，店主们记得及时为货架补货~</p>
          </div>
        </div>
      </div>
    </div>
    <m-toast v-model="toastContent"></m-toast>
    <alert3-dialog :show.sync="showAlert3Dialog"></alert3-dialog>
  </div>
</template>

<script>
import { sourceDomain } from '@/utils/constant'
import SaleList from 'comp/sale-list'
import MToast from 'comp/m-toast'
import mixins from 'comp/mixins'
import {
  getStorage,
  setStorage
} from '@/utils/wx'
import Alert3Dialog from 'comp/alert3-dialog'

export default {
  mixins: [mixins],
  components: {
    SaleList,
    MToast,
    Alert3Dialog
  },
  data () {
    return {
      icons: {
        bg1: `${sourceDomain}/sale-bg1.png`,
        bg2: `${sourceDomain}/sale-bg2.png`,
        delete: `${require('static/images/onsale/delete.png')}`
      },
      cateList: [],
      currentCate: 0,
      currentCateId: '',
      storeItemList: {}, // 所有已请求到的分类下的列表集（便于做接口缓存）
      currentStoreItemList: [], // 当前分类下的列表
      chosenItem: [],
      chosenItemId: [],
      canChoose: true,
      toastContent: '',
      playerId: '',
      storeInfo: {},
      showAlert3Dialog: false
    }
  },
  computed: {
    bg1 () {
      return `background-image: url(${this.icons.bg1});`
    },
    bg2 () {
      return `background-image: url(${this.icons.bg2});`
    },
    deleteIcon () {
      return `background-image: url(${this.icons.delete});`
    }
  },
  async mounted () {
    this.resetData()
    await this.getUpStoreItem()
    await this.getStoreItemCate()
    await this.getStoreItem()
    await this.getPlayerStoreInfo()
  },
  methods: {
    /**
     * 获取分类
     */
    async getStoreItemCate () {
      const ret = await this.$store.dispatch('getStoreItemCate')
      this.cateList = ret.data.list || []
      this.currentCateId = this.cateList[0] && this.cateList[0].cate_id
      this.playerId = ret.account.player_id
    },
    /**
     * 点击分类菜单
     */
    async onMenuClick (i) {
      this.currentCate = i
      this.currentCateId = this.cateList[i].cate_id
      // 如果已经有对应的列表，则不再发起请求
      if (this.storeItemList[this.currentCate]) {
        this.currentStoreItemList = this.storeItemList[this.currentCate]
      } else {
        await this.getStoreItem()
      }
    },
    /**
     * 获取分类下的商品
     */
    async getStoreItem () {
      const ret = await this.$store.dispatch('getStoreItem', {
        cate_id: this.currentCateId
      })
      this.storeItemList[this.currentCate] = ret.data.list
      this.currentStoreItemList = this.storeItemList[this.currentCate]
    },
    /**
     * 列表选择事件
     */
    onChooseBtnClick (data) {
      const item = data.item
      const i = this.chosenItemId.indexOf(item.item_id)
      const exist = i > -1
      if (exist) {
        if (!data.chosen) {
          // 删除某一项
          this.chosenItem.splice(i, 1)
          this.chosenItemId.splice(i, 1)
        }
      } else {
        if (data.chosen) {
          this.chosenItem = this.chosenItem.concat(item)
          this.chosenItemId = this.chosenItemId.concat(item.item_id)
        }
      }
      this.canChoose = this.chosenItem.length < parseInt(this.storeInfo.items)
    },
    /**
     * 商品上架
     */
    async onSetStoreItemClick () {
      if (this.chosenItem.length > 0) {
        const ret = await this.$store.dispatch('upStoreItem', {
          'itemids[]': this.chosenItemId
        })
        if (ret.data) {
          wx.showModal({
            title: '提示',
            content: '商品上架成功',
            confirmText: '确认',
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                wx.reLaunch({
                  url: '/pages/index/main'
                })
              }
            }
          })
        }
      } else {
        this.toastContent = '请先选中商品'
      }
    },
    /**
     * 获取已上架商品
     */
    async getUpStoreItem () {
      const ret = await this.$store.dispatch('getUpStoreItem')
      const data = ret.data || []
      let itemId = []
      for (let i = 0; i < data.length; i++) {
        itemId = itemId.concat(data[i].item_id)
      }
      this.chosenItemId = itemId
      this.chosenItem = data
    },
    /**
     * 删除选中项
     */
    onDeleteClick (item) {
      const i = this.chosenItemId.indexOf(item.item_id)
      this.chosenItem.splice(i, 1)
      this.chosenItemId.splice(i, 1)
      this.canChoose = true
    },
    /**
      * 通过playerid获取玩家的个人信息和店铺信息
      */
    async getPlayerStoreInfo () {
      const ret = await this.$store.dispatch('getPlayerStoreInfo', {
        player_id: this.playerId
      })
      this.storeInfo = ret.data.store || {}
      // 如果有空余货架，则可以再选择
      this.canChoose = this.chosenItem.length < this.storeInfo.items
      if (this.storeInfo.items === '4') {
        try {
          const isUnLock = await getStorage('isUnLock')
          if (isUnLock === '1') {
            this.showAlert3Dialog = true
            setStorage('isUnLock', '0')
          }
        } catch (err) {
        }
      }
    }
  },
  onShareAppMessage () {
    setStorage('isUnLock', '1')
    return {
      title: '快来帮我解锁货架吧',
      path: `/pages/index/main?playerId=${this.playerId}&parentId=${this.playerId}&isUnLock=1`
    }
  }
}
</script>

<style lang="less" scoped>
.adaofu-onsale {
  .container {
    position: relative;
    min-height: 100%;
    min-height: 100vh;
    background: url("../../../static/images/wall-bg.png") repeat center center;
    background-size: 72rpx 60rpx;
    padding-top: 16rpx;
    padding-bottom: 50rpx;
  }
  .selected-section {
    width: 600rpx;
    height: 400rpx;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    margin: 0 auto;
    .selected-list {
      display: flex;
      flex-wrap: wrap;
      width: 308rpx;
      margin-left: 165rpx;
      padding-top: 46rpx;
      & > div {
        position: relative;
        width: 107rpx;
        height: 107rpx;
        border: 2rpx dashed #fff;
        border-radius: 10rpx;
        margin-right: 43rpx;
        margin-bottom: 15rpx;
        display: flex;
        align-items: center;
        img {
          width: 107rpx;
          height: 107rpx;
          border-radius: 10rpx;
        }
        button {
          font-size: 21rpx;
          color: #3f221a;
          padding: 15rpx;
          border-radius: 10rpx;
          background-color: transparent;
          line-height: 1.0;
          &::after {
            display: none;
          }
        }
        &.invite {
          background-color: #bcb8b8;
          text-align: center;
        }
        .delete {
          display: block;
          width: 30rpx;
          height: 30rpx;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: contain;
          position: absolute;
          top: -15rpx;
          right: -15rpx;
        }
      }
    }
    .btn {
      font-size: 22rpx;
      color: #fff;
      width: 124rpx;
      height: 51rpx;
      background: url("../../../static/images/onsale/btn.png") no-repeat center center;
      background-size: contain;
      line-height: 51rpx;
      text-align: center;
      margin-left: 233rpx;
    }
  }
  .list-section {
    display: flex;
    margin-left: 48rpx;
    width: 650rpx;
    .menu {
      width: 50rpx;
      &-list {
        margin-bottom: 15rpx;
        color: #f9e6cf;
        background-color: #471603;
        border-top-left-radius: 10rpx;
        border-bottom-left-radius: 10rpx;
        &.active {
          color: #471603;
          background-color: #f9e6cf;
        }
      }
      &-inner {
        width: 25rpx;
        font-size: 21rpx;
        margin: 0 auto;
        padding: 15rpx 0;
      }
    }
    .detail {
      width: 600rpx;
      height: 829rpx;
      background-repeat: no-repeat;
      background-position: center center;
      background-size: contain;
      .detail-inner {
        height: 600rpx;
        overflow: scroll;
        margin-top: 40rpx;
      }
      .tips {
        font-size: 18rpx;
        color: #e24040;
        padding: 12rpx 80rpx 0;
      }
    }
  }
}
</style>
